<template>
<ThreeDModel />
  <view class="container">
    <!-- 出发地和目的地输入框 -->
    <view class="input-wrapper">
      <view class="input-container">
        <input
          v-model="startPlace"
          placeholder="出发地"
          placeholder-style="text-align: center"
          @click="chooseTo('from')"
        />
      </view>
      <!-- 高铁图标 -->
      <view class="iconfont-gaotie" @click="swapPlaces">
		  <text class="icon-symbol icon-symbol-gaotie"></text>
	  </view>
      <view class="input-container">
        <input
          v-model="endPlace"
          placeholder="目的地"
          placeholder-style="text-align: center"
          @click="chooseTo('to')"
        />
      </view>
    </view>
    <!-- 点击跳转到攻略页面 -->
    <button type="primary" @click="generateStrategy">一键生成攻略</button>
  </view>
</template>

<script setup>
import ThreeDModel from '@/components/ThreeDModel.vue';
import { ref, onMounted, onUnmounted } from 'vue';

// 初始化出发地和目的地输入框的值
const startPlace = ref('');
const endPlace = ref('');

// 交换出发地和目的地的函数
const swapPlaces = () => {
  const temp = startPlace.value;
  startPlace.value = endPlace.value;
  endPlace.value = temp;
  console.log('交换图片');
};

// 生成攻略
const generateStrategy = () => {
  if (!startPlace.value || !endPlace.value) {
    uni.showToast({
      title: '请输入目的地和出发地',
      icon: 'none',
      duration: 2000
    });
    return;
  }
  uni.redirectTo({
    url: `/pages/strategypage/strategypage?startPlace=${encodeURIComponent(
      startPlace.value
    )}&endPlace=${encodeURIComponent(endPlace.value)}`
  });
};

// 选择出发地和目的地时跳转的页面
const chooseTo = (type) => {
  let url = '';
  if (type === 'from') {
    url = `/pages/chooseLocation/chooseLocation?type=from&current=${encodeURIComponent(startPlace.value)}`;
  } else if (type === 'to') {
    url = `/pages/chooseLocation/chooseLocation?type=to&current=${encodeURIComponent(endPlace.value)}`;
  }
  console.log('跳转 URL:', url); // 新增日志，确认跳转 URL 是否正确
  uni.navigateTo({ url });
};
// 监听城市选择事件
const handleCitySelected = (data) => {
  if (data.type === 'from') {
    startPlace.value = data.city;
	console.log('出发地：',startPlace.value)
  } else if (data.type === 'to') {
    endPlace.value = data.city;
	console.log('目的地：',endPlace.value)
  }
};

// 在组件挂载时监听事件
onMounted(() => {
  uni.$on('citySelected', handleCitySelected);
  console.log('已监听事件');
});

// 在组件卸载时移除监听
onUnmounted(() => {
  uni.$off('citySelected', handleCitySelected);
  console.log('已移除事件监听');
});
</script>

<style scoped>
.container {
  padding: 20px;
}

.input-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.input-container {
  display: flex;
  align-items: center;
  width: 30%;
}

.input-container text {
  width: 80px;
}

.input-container input {
  flex: 1;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
}

button {
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
}

.iconfont-gaotie {
  cursor: pointer; /* 添加鼠标指针样式，提示可点击 */
}
</style>